<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link charset="utf-8" rel="stylesheet" type="text/css" href="/static/ali/login.css" />
<link rel="stylesheet" href="/static/iconfont_1169900/iconfont.css">
<title>友利钱包账户中心</title>
</head>
<body>
<style>
</style>
	<header>
		<div style="display: none" class="header-wrapper">
			<div class="mobile-link"><a>手机APP</a></div>
			<div class="navs-links">
				<a>钱包首页</a>
				<span>|</span>
				<a>服务大厅</a>
				<span>|</span>
				<a>提建议</a>
			</div>
		</div>
	</header>

	<div class="content">
		<h1 class="logo"><a><img src="/static/logo.png" alt="logo"></a></h1>
		<div class="logo-panel">
			<ul>
				<li class="active" data="1">个人账号</li>
				<li class="" data="2">商家账号</li>
			</ul>
			<div class="login-form">
				<div class="login-code active">
					<form action="/customer/login" method="post" class="layui-form" onsubmit="return false">
						<input type="hidden" name="loginType" value="1">
						<div class="form-item">
							<label><i class="iconfont icon-authoritymanagement"></i></label>
							<input type="text" name="phoneNo" placeholder="手机号" required lay-verify="required|phone">
						</div>
						<div class="form-item">
							<label><i class="iconfont icon-auth"></i></label>
							<input type="text"  name="smscode" placeholder="短信验证码" autocomplete="off" required lay-verify="required|number">
							<p class="smscode"><button type="button">获取</button></p>
						</div>
						<button type="button" lay-submit lay-filter="login-formcode">个人登录</button>
					</form>
				</div>
			</div>
		</div>
	</div>

	#include("common/footer.html")
<script src="/static/layui/layui.js"></script>
<script type="text/javascript">
window.loging = false;
layui.config({
	version: "3.0.0",
	base: '/static/fly/mods/'
}).extend({
	fly: 'index'
}).use(['form', 'layer'], function(){
	var $ = layui.$, form = layui.form;
	// 切换登录方式
	$("div.logo-panel>ul>li").on("click", function(){
		$("div.logo-panel>ul>li").removeClass("active");
		$(this).addClass("active");
		var loginType = $(this).attr("data");
		$("input[name='loginType']").val(loginType);
		if("1" == loginType) {
			$("button[lay-submit]").text("个人登录");
		} else if("2" == loginType) {
			$("button[lay-submit]").text("商家登录");
		}
	});
	// 短信登录
	form.on("submit(login-formcode)", function(data){
		if(window.loging)return false;
		window.loging = true;
		//请求登入接口
		$.ajax({
            url: "/customer/login",
            data: data.field,
            type: "post",
            dataType: "json",
            success: function(res){
                if(res.code == 0){
                    layer.msg('登入成功，即将跳转……', {offset: '15px', time: 1000, icon: 1}, function(){
                        location.href = '/customer/index';
                    });
                }else{
                    layer.msg(res.msg, {icon: 2});
                    window.loging = false;
                }
            },
            error: function(){
            	layer.msg("出错了", {icon:2});
            	window.loging = false;
            }
		});
		return false;
	});
    // 聚焦输入框
    $("div.login-form input[name='phoneNo']").focus();
    // 响应回车键
    $(document).on('keydown', function(e){
    	if(e.keyCode == 13){
    		$("button[lay-submit]").click();
    	}
    });

	// 发送短信验证码
    $("div.form-item p.smscode button").on("click", function(){ sendsms(); });
    var timer,second=60,flag = false;
    function sendsms(){
    	if(flag)return;
    	if($("input[name='phoneNo']").val() == "" || !/^1[34578]\d{9}$/.test($("input[name='phoneNo']").val())){
    		layer.msg("请输入正确的11位手机号", {icon:2});
    		return;
    	}
    	if($(".login-code input[name='vercode']").val() == ""){
    		layer.msg("图形验证码不能为空", {icon:2});
    		return;
    	}
    	flag = true;
    	$.post("/customer/sendsms?type=login", $("div.login-code form").serialize(), function(data){
    		// 验证码发送失败
    		if(data.code != 0) {
    			flag=false;
        		layer.msg(data.msg, {icon:5});
        		return;
    		}
    		layer.msg(data.msg, {icon:6});
    		// 验证码发送成功
    		timer = setInterval(() => { 
        		if(second <= 0) {
        			clearInterval(timer);
        			second = 60;
        			flag = false;
        			$(".form-item p.smscode button").text("获取");
        		} else{
        			$(".form-item p.smscode button").text(second);
        			second = second - 1;
        		}
        	}, 1000);
    	});
    }
});
</script>
</body>
</html>
